<template>
  <div class="ware_part">
    <!-- 搜索组件 -->
    <Searcha :plh_a="placeholdera" :plh_b="placeholderb" :url="addurl" :name="name" :enterSearch="showSearch"></Searcha>
    <!-- 表格 -->
    <el-table
	border
	ref="multipleTable"
	:data="tableData"
	tooltip-effect="dark"
	style="width: 100%"
	@selection-change="handleSelectionChange"
    >
    <el-table-column align="center" type="selection" width="55"> </el-table-column>
    <el-table-column align="center" prop="name" label="部门名称" width="300" sortable></el-table-column>
    <el-table-column align="center" prop="code" label="部门代码" width="300" sortable> </el-table-column>
    <el-table-column align="center" prop="time" label="修改时间" show-overflow-tooltip sortable width="300"></el-table-column>
    <el-table-column align="center" prop="updata" label="修改人" width="300" sortable> </el-table-column>
    <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		</template>
    </el-table-column>
    </el-table>
	<!-- 编辑弹窗 -->
	<Dialog :list="list" :url="url" :name="name"></Dialog>

    <!-- 分页组件 -->
    <Pagination :num="lists.length" :router="router"></Pagination>
  </div>
</template>



<style lang="scss">
	.el-table {
		.el-table_1_column_6 {
			.cell {
				text-align: center;
			}
		}
	}
</style>




<script>
import Pagination from "@c/Pagination";
import Searcha from "@c/Searcha";
import Dialog from "@c/Dialog";

export default {
  components: { Searcha, Pagination, Dialog },
  data() {
    return {
		title: "商品管理",
		placeholdera: "请输入部门名称",
		placeholderb: "请输入部门代码",
		tableData: [],
		lists: [],
		list: {},
		// 修改接口
		url: '/product/updata',
		addurl: '/product/add',
		name: [ '部门名称', '部门代码', ],
		// 弹窗
		dialog: false,
		// 路由
		router: '/basics/wares/',
		// 请求数据
		get:  '/product',
		gets: '/products',
		// 删除
		delete: '/product/delete',
		// 数据库集合
		coll: 'wares',
    };
},
  	created() {
		this.$store.commit("title", this.title);
		this.$store.commit('dialog', this.dialog)
		this.getData();
		this.getDatas();
		
  	},
	computed: {
		keyWord() {
            return this.$store.state.keyWord
        }
	},
	methods: {
		//   搜索框
		showSearch(val) {
			// console.log(val);
			this.$store.commit('updataSearch', val)
		},
		
		// 请求数据的方法
		getData() {
			let { params } = this.$route
			this.$http.get(this.get, { params })
				.then(({data}) => {
					this.tableData = data
				})
				
		},
		getDatas() {
			this.$http.get(this.gets)
				.then(({data}) => {
					this.lists = data
				})
				
		},

		handleSelectionChange () {
			
		},
		//   编辑
		handleEdit(index, data) {
			this.$store.state.dialog = true;
			// console.log(data);
			this.list = data;
		},
		//   删除
		handleDelete(index, data) {
			// console.log(data);
			this.$confirm('确定要删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
			.then(() => {
				this.$http.get(this.delete, { params: {_id: data._id}})
					.then(({ data }) => {
						if(!data.errno) {
							this.$message({
								message: data.msg,
								type: 'success'
							})
							setTimeout(() => {
								this.$router.go(0)
							},1000)
						}
					})
				}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
		}
		
	},
	watch: {
		$route() {
			this.getData()
		},
		keyWord(value) {
			this.$http.get('/search', {
				params: {
					value,
					coll: this.coll
				}
			}).then(({data}) => {
				if(!data.msg) {
					this.tableData = data
					this.lists = data
				}else {
					this.$message.error(data.msg)
				}
			})

		}
	}
};
</script>